<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item>API管理</el-breadcrumb-item>
        <el-breadcrumb-item>CDN-API认证</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="24">
      <el-form ref="form" :model="form" label-width="80px" v-loading="apiLoading">
        <el-form-item label="接口域名">
          <el-input v-model="form.apiPath" placeholder="请输入请求接口域名"></el-input>
        </el-form-item>
        <el-form-item label="接口地址">
          <el-input v-model="form.apiUrl" placeholder="请输入请求接口的url地址(不包括域名在内的全部url)"></el-input>
        </el-form-item>
        <el-form-item label="请求类型">
          <el-input v-model="form.apiType" placeholder="请输入请求接口的类型(get,post,....)"></el-input>
        </el-form-item>
        <el-form-item label="AK">
          <el-input v-model="form.apiAK" placeholder="请输入认证信息AK"></el-input>
        </el-form-item>
        <el-form-item label="SK">
          <el-input v-model="form.apiSK" placeholder="请输入认证信息SK"></el-input>
        </el-form-item>
        <el-form-item label="时间戳">
          <el-input v-model="form.apiTimes" placeholder="请输入时间戳"></el-input>
        </el-form-item>
        <el-form-item label="字符串">
          <el-input v-model="form.apiString" placeholder="请输入随机字符串"></el-input>
        </el-form-item>
        <el-form-item label="请求Body">
          <el-input type="textarea" v-model="form.apiBody" placeholder="根据请求类型填写内容体,无请求体可为空"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" >计算签名</el-button>
        </el-form-item>
      </el-form>
    </el-col>
   <el-col :span="24">
     
     <p>请求body(MD5):<el-tag type="success"> {{bodyS}}</el-tag></p>
     <p>签名结果: <el-tag type="success">{{signature}}</el-tag></p>
     <p>最终authorization: <el-tag type="success">{{authorization}}</el-tag></p>
     <p class="pCurl">{{curl}}</p>
   </el-col>
  </el-row>
</template>
<script>
import md5 from 'js-md5';
import moment from 'moment';
  export default{
    data(){
      return {
        form: {
          apiPath:'www.capitalonline.net',
          apiUrl: '',
          apiType: '',
          apiAK: '',
          apiSK: '',
          apiTimes: '',
          apiString: '',
          apiBody: ''
        },
        apiLoading: false,
        curl:'',
        bodyS:'',
        signature:'',
        authorization:''
      }
    },
    methods: {
      onSubmit() {
        this.apiLoading=true;
        console.log('submit!');
        let bodyS = md5(this.form.apiBody);
        this.bodyS=bodyS;

        let apiUrl = ['url', this.form.apiUrl].join('=');
        let apiType = ['method', this.form.apiType].join('=');
        let apiSK = ['sk', this.form.apiSK].join('=');
        let apiTimes = ['timestamp', this.form.apiTimes].join('=');
        let apiString = ['cid', this.form.apiString].join('=');
        let apiAK = ['ak', this.form.apiAK].join('=');
        let apiBody = ['body', bodyS].join('=');

        let signature = 'signature='+md5([apiAK,apiBody,apiString,apiType,apiSK,apiTimes,apiUrl].join('&'));
        this.signature=signature;

        let autns='authorization:'+ [apiAK,apiString,signature,apiTimes].join('&');
        this.authorization= autns;

        this.curl = ['curl','-i','--url','http://'+this.form.apiPath+this.form.apiUrl,'-X',this.form.apiType,'-H',"'"+ autns +"'",'-H','Content-Type:application/json','-d',"'"+ this.form.apiBody +"'"].join(' ');      
        this.apiLoading=false;
      }
    },
    mounted() {
      this.form.apiTimes=moment().unix();
    }
  }
</script>

<style>
  .demo-table-expand label {
    font-weight: bold;
  }
  .pCurl{
    padding: 15px;
    border: 1px solid;
    background-color: black;
    color: white;
    border-radius: 5px;
  }
</style>
